import React from 'react';
import classNames from 'classnames';
export enum ButtonSize {
  Large = 'lg',
  Small = 'sm'
};
export enum ButtonType {
  Primary = 'primary',
  Default = 'default',
  Danger = 'danger',
  Link = 'link'
};

interface BaseButtonProps {
  className?: string;
  disabled?: boolean;
  size?: ButtonSize;
  btnType?: ButtonType;
  children: React.ReactNode;
  href?: string;
};
// 交叉类型，将多个类型合并为一个类型
// Partial将属性都设置为可选的
type NativeButtonProps = BaseButtonProps & React.ButtonHTMLAttributes<HTMLElement>;
type AnchorButtonProps = BaseButtonProps & React.AnchorHTMLAttributes<HTMLElement>;
export type ButtonProps = Partial<NativeButtonProps & AnchorButtonProps>;
const Button: React.FC<ButtonProps> = (props) => {
  const {
    btnType,
    className,
    disabled,
    size,
    children,
    href,
    // 取出剩余属性
    ...restProps
  } = props;
  // btn, btn-lg, btn-primary
  // 通过插件classnames添加多个classname
  const classes = classNames('btn', className, {
    [`btn-${btnType}`]: btnType,
    [`btn-${size}`]: size,
    'disabled': (btnType === ButtonType.Link) && disabled
  });
  if (btnType === ButtonType.Link && href) {
    return (
      <a
        href={href}
        className={classes}
        {...restProps}
      >
        {children}
      </a>
    );
  }
  return (
    <button
      className={classes}
      disabled={disabled}
      {...restProps}
    >
      {children}
    </button>
  );
}

Button.defaultProps = {
  disabled: false,
  btnType: ButtonType.Default
};

export default Button;